<script lang="ts" setup>
import { ref } from 'vue';
const emit = defineEmits(['myClick']);

const props = defineProps({
  list: {
    type: Array
  }
});

const currentData = ref<any>({
  imgs: [
    'https://m.360buyimg.com/mobilecms/s750x366_jfs/t28135/181/881269044/154376/20982743/5c00cf3cN78cb04bd.jpg!cr_1125x549_0_72!q70.jpg.dpg',
    'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/17024/25/2169/113386/5c1a113bE8a03bc43/400b0ace87f84e57.jpg!cr_1125x549_0_72!q70.jpg.dpg',
    'https://m.360buyimg.com/mobilecms/s750x366_jfs/t29161/315/207118239/226175/1a37a9fe/5beb0fb6N70b0b6d1.jpg!cr_1125x549_0_72!q70.jpg.dpg',
    'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/7830/9/10341/82883/5c20415aEf2b3052d/a21403a777f465b1.jpg!cr_1125x549_0_72!q70.jpg.dpg'
  ]
});

const toDetail = (id:any) => {
  emit("myClick", id);
};
</script>
<template>
  <section class="productOtherUtil">
    <div class="title">猜你喜欢</div>
    <div class="content">
      <van-swipe class=" my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in currentData.imgs" :key="index" >
          <img :src="item" class="swipe-image" />
        </van-swipe-item>
        
      </van-swipe>
    </div>
  </section>
</template>

<style lang="less" scoped>
.productOtherUtil {
  width: 3.75rem;
  background: white;
  .title {
    padding-left: .1rem;
    height: .4rem;
    line-height: .4rem;
    color: #333;
    font-size: .14rem;
    position: relative;
    &::after {
      width: 100%;
      height: 0rem;
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: .01rem solid #ddd;
    }
  }
  .content {
    width: 3.75rem;
    height: 3.75rem;
    .imgs-wrap{
      width: 3.75rem;
      height: 3.78rem;
      .item {
        width: 1.22rem;
        height:1.22rem;
        float: left;
        margin: 0 .04rem .04rem 0;
        background-size: cover !important;
        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
